<template>
	<div class="resource" style="padding: 0 20px">
		<el-table :data="tableList" border style="width: 100%; margin-top: 20px">
			<el-table-column prop="id" label="编号" width="50" style="font-size: 12px" />
			<el-table-column prop="name" label="资源名称" />
			<el-table-column prop="url" label="资源路径" />
			<el-table-column prop="description" label="描述" />
			<el-table-column label="添加事件">
				<template #default="scope">
					<div>
						{{ formatTime(scope.row.createTime) }}
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			style="float: right; margin-top: 20px"
			v-model:current-page="pagination.currentPage"
			v-model:page-size="pagination.pageSize"
			:page-sizes="[10, 20, 50, 100]"
			:small="false"
			:background="true"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pagination.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
</template>

<script setup lang="ts">
import useTable from "@/hooks/useTable";
import formatTime from "@/utils/formatTime";
import * as resource from "@/request/modules/resource";

const { handleSizeChange, handleCurrentChange, pagination, tableList } = useTable(resource.resourceListAPI);
</script>

<style scoped lang="less">
.resource_ljz {
	padding: 0 20px;
}

:deep(.el-table .cell) {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
}
</style>
